<template>
    <div class="check-fee">
        <table-set :tableHeader="tableHeader" @headerSet="headerSet"></table-set>
        <orderStatistics :myInfo ='myInfo' :roleID='roleID' v-if="roleID != 4"  @getData='getTableData'/>
        <span class="down-execel">
            <Poptip v-model="showFilter" placement="bottom-end">
                <i class="el-icon-search poptip-condition-add"></i>
                <a href="javascript:;" class='poptip-condition-add'>列表查找</a>
                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus"></i>
                        <a href="javascript:;">添加过滤条件</a>
                        <div slot="content" class="condition-list">
                            <ul>
                                <li
                                    v-for="(item, index) in selectHead"
                                    :key="index"
                                    class='poptip-condition-item'
                                    @click="addFilterCondition(item)">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </Poptip>
                    <el-form :model="conditionForm" ref="conditionForm" label-width="120px" class="demo-dynamic" @submit.native.prevent>
                        <el-form-item
                            v-for="(condition, index) in conditionForm.condition"
                            :label="condition.label"
                            :key="condition.key"
                            :prop="'condition.' + index + '.value'"
                            :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}">
                            <!-- <el-autocomplete v-if='condition.label === "工作邮箱"' v-model="formAgent.name" :fetch-suggestions="querySearch"
                                :trigger-on-focus="true" placeholder="请选择工作邮箱" @select="handleSelect" size="small">
                            </el-autocomplete> -->

                            <el-select
                                v-if='condition.label === "申请人"'
                                v-model="condition.value"
                                placeholder="请选择申请人"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="(item, index) in applyOptions"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "手机号码"'
                                v-model="condition.value"
                                placeholder="请选择手机号码"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="(item, index) in phoneOptions"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "邮箱"'
                                v-model="condition.value"
                                placeholder="请选择邮箱"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="(item, index) in emialOptions"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "付款状态"'
                                v-model="condition.value"
                                placeholder="请选择付款状态"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="(item, index) in payStatusOptions"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                            <el-date-picker
                                v-model="condition.value"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                size="small"
                                :validate-event='false'
                                v-else-if='condition.label === "更新时间"'>
                            </el-date-picker>
                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
                            <el-button @click.stop="removeDomain(condition)" size="mini" v-no-more-click:3000>删除</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="btns">
                        <el-button @click="submitsearch('conditionForm')" size="mini" v-no-more-click:3000>查询</el-button>
                        <el-button @click="resetForm('conditionForm')" size="mini" v-no-more-click:3000>重置</el-button>
                    </div>
                </div>
            </Poptip>
        </span>
        <el-table
            border
            :data="tableData"
            :height="tableHeight"
            v-loading="loading"
            @sort-change="tableSort"
            ref="check-fee"
        >
            <el-table-column
                show-overflow-tooltip
                label="ID"
                min-width="60"
                align="left"
                v-if='checked99'
            >
                <template slot-scope="scope">{{(scope.$index + 1) + (current_page - 1) * per_page}}</template>
            </el-table-column>
            <template v-for="item in tableHeader">
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'order_number' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="180"
                    align="left"

                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'name' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="120"
                    align="left"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'order_type' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="120"
                    align="left"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'liaisons' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="100"
                    align="left"
                    sortable="custom"

                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'liaisons_tel' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    align="left"
                    min-width="120"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'liaisons_email' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="120"
                    align="left"
                    sortable="custom"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'consumer_pay_status' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    sortable="custom"
                    min-width="110"
                    align="left"
                >
                    <template slot-scope="scope">
                        <span :class='scope.row.consumer_pay_status == 1 || scope.row.consumer_pay_status == 0 ? "font_success" : "font_danger"'>
                            {{ scope.row.consumer_pay_status| payStatus }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.prop == 'consumer_pay_img' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="120"
                    align="left"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.img_arr" class="img-wrap" @click.stop>
                            <pre-img
                                :smallImg="scope.row.img_arr"
                                :bigImg="scope.row.img_arr2"
                                class="pre-img">
                            </pre-img>
                            <!-- <el-image
                                v-for="(item, index) in scope.row.img_arr"
                                :key="index"
                                :src="item"
                                :preview-src-list="scope.row.img_arr"
                            ></el-image> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-if="item.prop == 'updated_at' && item.is_show"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    min-width="160"
                    align="left"
                    sortable="custom"
                ></el-table-column>
            </template>
            <el-table-column
                show-overflow-tooltip
                fixed="right"
                label="操作"
                min-width="130"
                align="center"
                v-if="checked99"
            >
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="surePay(scope.row)" v-no-more-click:3000 :disabled="$store.state.user.role_id == 4 || scope.row.consumer_pay_status != 2">确认缴款</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination @paginationChange="paginateChange" :total="total"></pagination>
		<sure-pay ref="sure-pay" @refresh="refresh"></sure-pay>
    </div>
</template>

<script>
import surePay from '../order/dialogPage/surePay'
import pagination from '~/components/pagination'
import tableSet from '~/components/tableSet'
import orderStatistics from "~/components/orderStatistics"
import preImg from '~/components/pre-img'
export default {
    components: {
        preImg,
        surePay,
        pagination,
        tableSet,
        orderStatistics
    },
    data() {
        return {
            total: 0,
            current_page: 1,
            per_page: 25,
            tableData: [],
            roleID: '',
            myInfo: {},
            tableHeader: [
                {
                    label: '订单编号',
                    prop: 'order_number',
                    is_show: true
                }, {
                    label: '案件名称',
                    prop: 'name',
                    is_show: true
                },
                // {
                //     label: '案件类型',
                //     prop: 'type',
                //     is_show: true
                // },
                {
                    label: '申请人',
                    prop: 'liaisons',
                    is_show: true
                }, {
                    label: '手机号码',
                    prop: 'liaisons_tel',
                    is_show: true
                }, {
                    label: '邮箱',
                    prop: 'liaisons_email',
                    is_show: true
                }, {
                    label: '付款状态',
                    prop: 'consumer_pay_status',
                    is_show: true
                }, {
                    label: '缴费凭证',
                    prop: 'consumer_pay_img',
                    is_show: true
                }, {
                    label: '更新时间',
                    prop: 'updated_at',
                    is_show: true
                },
            ],
            loading: false,
            baseUrl: global.baseurl,
            showFilter: false,
            showFilterCondition: false,
            // 筛选条件
            conditionForm: {
                condition: []
            },
            applyOptions: [],
            emialOptions: [],
            phoneOptions: [],
            checked99: true,
            search_params: {},
            sort_params: {},
            payStatusOptions: [
                {
                    label: '已缴费',
                    value: '1'
                },
                {
                    label: '未缴费',
                    value: '2'
                }
            ]
        }
    },
    computed: {
        tableHeight() {
            let height = 1000
            if (process.client) {
                height = window.innerHeight - 202
            }
            return height
        },
        selectHead() {
            let arr = this.tableHeader.filter(v => v.prop != 'consumer_pay_img')
            // arr = arr.filter(v => v.prop != 'consumer_pay_status')
            return arr
        }
    },
    created() {
        this.getTableData()
        this.getMyinfo()
    },
    methods: {
        getMyinfo () {
            this.$axios.get('/api/consumer/show').then( res => {
                if (res.data.code == 200) {
                    this.myInfo = res.data.data
                    this.roleID = this.myInfo.role_id
                    this.$store.commit("setRoleInfo",res.data.data)
					this.$store.commit("setUser",res.data.data)
                }
            })
        },
        paginateChange(params) {
            this.per_page = params.perPage
            this.current_page = params.page
            this.getTableData()
        },
        headerSet(data) {
            this.table_show = false
            this.tableHeader = data
            this.$nextTick(() => {
                this.table_show = true
            })
            if(data.every(v => v.is_show == false)) {
               this.checked99 = false
            }
            if (data.some(v => v.is_show == true)) {
               this.checked99 = true
            }
        },
        tableSort(column) {
            let params = {
                sort_str: column.prop,
            }
            if (column.order == 'ascending') {
                params.sort_order = 'asc'
            } else if (column.order == 'descending') {
                params.sort_order = 'desc'
            } else {
                params = {}
            }
            this.sort_params = params
            this.getTableData()
        },
        refresh() {
            this.getTableData()
            this.getMyinfo()
        },
        getTableData(args) {
            let params = {
                page: this.current_page,
                perPage: this.per_page
            }
            params = {...params, ...this.search_params, ...this.sort_params}
            if (args) {
                params = {...params, ...args}
            }
            this.loading = true
            this.$axios.get('/api/finals/confirm_payment', {
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.page.total
                    this.applyOptions = res.data.allLiaisons
                    this.emialOptions = res.data.allLiaisonsEmail
                    this.phoneOptions = res.data.allLiaisonsTel
                    this.tableData.forEach(v => {
                        v.img_arr = []
						v.img_arr2 = []
						if (v.consumer_pay_img_thumb) {
							let arr = v.consumer_pay_img_thumb.split('&')
							if (v.consumer_pay_img) {
								let arr = v.consumer_pay_img.split('&')
								for (let i in arr) {
									v.img_arr2.push(this.baseUrl + '/storage/upload/' + arr[i])
								}
							}
							for (let i in arr) {
								v.img_arr.push(this.baseUrl + '/storage/upload/' + arr[i])
							}
						}
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
                this.loading = false
            }).catch(e => {})
        },
        surePay(row) {
            this.$refs['sure-pay'].showOn(row)
        },
        addFilterCondition(item) {
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.prop,
                key: Date.now()
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        removeDomain(item) {
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
            if (item.label === '提交时间') {
                this.submitTime = []
            }
            let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
            let params = {}
            props.forEach(v => {
                params[v.parameter] = v.value
            })
            if (params.created_at) {
                params.createdTime = params.created_at
                delete params.created_at
            }
            this.search_params = params
            this.getTableData()
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
                    let params = {}
                    props.forEach(v => {
                        params[v.parameter] = v.value
                    })
                    if (params.created_at) {
                        params.createdTime = params.created_at
                        delete params.created_at
                    }
                    this.search_params = params
                    this.sort_params = {}
                    this.current_page = 1
                    this.$refs['check-fee'].clearSort()
                    this.getTableData()
                    this.showFilterCondition = false
                    this.showFilter = false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.conditionForm.condition.forEach(v => {
                if (v.value) {
                    v.value = null
                }
            });
            this.$refs['check-fee'].clearSort()
            this.search_params = {}
            this.sort_params = {}
            this.$nextTick(() => {
                this.$refs[formName].clearValidate()
            })
            // this.getTableData()
            // this.showFilterCondition = false
            // this.showFilter = false
        },
    }
}
</script>

<style lang="less" scoped>
.check-fee {
    .pre-img {
        .small-img {
            width: 23px;
            height: 23px;
        }
    }
    /deep/.ivu-poptip-inner {
		min-width: 450px;
		// height: 300px;
		overflow-y: scroll;
	}

	/deep/.poptip-condition .ivu-poptip-inner {
		min-width: 180px;
	}

	.demo-dynamic {
		padding-left: 10px;

		.el-form-item {
			margin-bottom: 12px;
		}

		.el-input {
			width: 240px;
		}

		.el-date-editor {
			width: 240px;
		}

		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}

		.el-form-item__error {
			padding-top: 0;
		}
	}

	.poptip-condition {
		display: block;
		margin-top: 10px;

		.poptip-condition-item {
			line-height: 25px;
			cursor: pointer;
		}

		.poptip-condition-add {
			font-size: 14px;
		}
	}

	.btns {
		margin-top: 10px;
    }
    .el-table {
        .img-wrap {
            display: flex;
            justify-content: center;
            > div {
                height: 23px;
            }
            .el-image {
                width: 23px;
                height: 23px;
                margin-right: 5px;
            }
        }
    }
}


</style>
